<template>
    <div>
       
        <!-- <van-nav-bar title="开通协议支付" left-arrow @click-left="jumPage('/cj/Cjpassageway')"  left-text="返回" style="color:white;background:#2A71C8" /> -->
        <div style="background:white;" class="pad-t-20">
            <p class="phone f-30">卡号：<span>{{cardDetial.bankCard |fmtbankcode}}</span></p>
            <p class="phone f-30">发卡行: <span>{{cardDetial.bank}}</span></p>
        </div>

        <van-cell-group class="f-35" style="margin-top:10px;">
            <!-- <van-field label='CVV2:' type='number' v-model="cvv2" placeholder="卡背面后3位" />
             <van-cell @click="hkrl"   title="有效月" is-link >
                 <span v-if="senData.selMonth" class="c000">{{senData.selMonth}}</span>
                 <span v-else style="color:#949494;">请选择</span>
            </van-cell>
             <van-cell @click="hkrlYear"  title="有效年" is-link >
                 <span v-if="senData.selYear" class="c000">{{senData.selYear}}</span>
                 <span v-else style="color:#949494;">请选择</span>
            </van-cell> -->
            <!-- <van-field label='有效期(年):' type='number' v-model="year" placeholder="例：18" /> -->
            <!-- <van-field label='有效期(月):' type='number' v-model="month" placeholder="例：09" /> -->
            <div class="fiex" style="border-bottom: 1px solid #ebedf0;">
                <van-field  class="fiex1 not-b f-35" label='手机号:' type='number'   v-model="cardDetial.reservePhone"  placeholder="请输入手机号" />
            </div>
            <div class="fiex">
                <van-field class="fiex1" v-model="sms" center clearable label="验证码:" placeholder="请输入短信验证码"></van-field>
                 <p class="mag-r-40 f-30" style="background:none;color:#2A71C8;border:none" @click="smss()">{{fayzm}}</p>
            </div>
        </van-cell-group>
        <!-- <p class="f-30" style="width:95%;text-align:left;margin-left:2.5%;margin-top:10px;color:#EC5551;"><span>*</span>请根据提示认真填写您的信息，信息已加密且仅用于身份验证，可放心提交</p> -->
        <button class="ktbtn" @click="pay">签约</button>
         <!-- 选择有效月 -->
        <van-popup v-model="hkshow" position="bottom" :overlay="true">
            <van-area :area-list="mounth" @cancel='hkshow=false' columns-num='1' title="有效月" @confirm='selhkOk' />
        </van-popup>
          <!--选择有效年 -->
        <van-popup v-model="hkshowYear" position="bottom" :overlay="true">
            <van-area :area-list="yearList" @cancel='hkshowYear=false' columns-num='1' title="有效年" @confirm='selhkrlYear' />
        </van-popup>
    </div>
</template>

<script>
var $th ="";
    import {
        Toast
    } from 'vant';
    export default {
        data() {
            return {
                mounth:{
                    province_list: {},
                },
                yearList:{
                    province_list: {},
                },
                mark:this.$route.params.mark,
                cvv2: "",
                year: "",
                month: "",
                sms: null,
                yzmdata: '',
                fayzm: '发送验证码',
                orderNo: '',
                aisleMerId:'',
                cardDetial:{ //卡详情
                },
                senData:{
                    selMonth:"", //有效月
                    selYear:""//有效年
                },
                hkshow:false,
                hkshowYear:false,
                cardDetialJson:"", //缓存
                passageway:""//通道详细信息
            }
        },
        created() {
              $th = this;
              //读取卡信息
              var selscList = JSON.parse(localStorage.getItem("selscList"));
              this.passageway = JSON.parse(localStorage.getItem("passageway"));
              this.cardDetial = selscList;
            // this.$Spin.hide();
        },
        async mounted(){
                 $th  = this;
                 //月份列表
                 for(var i=12; i>0 ;i--){
                       this.mounth.province_list[i] = i;
                 }
                 //年份列表
                var myDate = new Date();
                var tYear = myDate.getFullYear();
                tYear =  tYear.toString().substr(2,2)*1;
                this.yearList.province_list[tYear] = tYear;
                 for(var i=0; i<10 ;i++){
                       tYear+=1;
                       this.yearList.province_list[tYear] = tYear;
                 }
                 console.log("tYear",this.yearList.province_list)
                return
                $th.cardDetialJson = JSON.parse(localStorage.getItem("commitPlan"));
                var cardId = localStorage.getItem("cardId");
                try {
                    var cardDetial = await $th.$axiosFun('/customer/bankCard/findCardById',{
                        id:cardId
                    },'get');
                    if(cardDetial.code==1000){
                        $th.cardDetial = cardDetial.data;
                        // $th.cardDetial = cardDetial.data;
                        // $th.cardDetial.overTime = $th.$fmthkdate($th.cardDetial.statementDate,$th.cardDetial.repaymentDate); //计算距离账单日的时间
                 }else{
                        $th.$toast(cardDetial.message);
                    }
                    console.log("接口返回的结果",cardDetial)

            } catch (error) {
                console.log("error",error)
            }

        },
        methods: {
            hkrlYear(){ //选择年 开启
                $th.hkshowYear = true;  
            },
            selhkrlYear(val){ //选择年

                $th.senData.selYear = $th.PrefixInteger(val[0].code,2)
                $th.hkshowYear = false; 
            },
            hkrl(){ //选择
                  $th.hkshow = true; 
            },
            selhkOk(val){ //关闭
                  $th.senData.selMonth = $th.PrefixInteger(val[0].code,2)
                  $th.hkshow = false; 
            },
           async smss() {
                // if ($th.cvv2 == null || $th.cvv2.length != 3) {
                //     Toast('请输入正确的cvv2');
                //     return;
                // }
                // if ($th.year == null || $th.month == null || $th.year.length != 2 || $th.month.length != 2 || $th.month >
                //     12) {
                //     Toast('请输入正确的有效期');
                //     return;
                // }
                if ($th.fayzm != '发送验证码' && $th.fayzm != '重新发送') {
                    Toast('请勿重复点击');
                    return
                }
                var sendData = {
                    bankAccountName:$th.cardDetial.opener,//银行卡姓名
                    bankAccountNo:$th.cardDetial.bankCard,//银行卡卡号
                    mobile:$th.cardDetial.reservePhone,//银行卡预留手机号
                    customerId:$th.cardDetial.customerId,//
                    cardId:$th.cardDetial.id, //卡id
                    rate:$th.passageway.rate,
                    d0fee:$th.passageway.d0Fee, 
                }
                console.log("发送短信提交的数据",sendData)
            try {
                 var cardDetial = await $th.$axios($th.GLOBAL.host+'/cjSign/signSms',sendData,'get');
                    if(cardDetial.code=='0000'){
                        Toast.success({
                            mask: true,
                            message: '发送成功'
                        });
                        $th.orderNo =cardDetial.data.orderNo; //返回的订单号 
                        $th.fayzm = 60;
                        let self = this;
                        let timer = window.setInterval(function(){
                            self.fayzm = self.fayzm - 1;
                            if (self.fayzm < 1) {
                                clearInterval(timer)
                                self.fayzm = '重新发送'
                            }
                        }, 1000)
                 }else{
                        $th.$toast(cardDetial.msg);
                 }
                } catch (error) {
                    console.log("error",error)
                }
     
                // })
            },
           async pay() {
                // if ($th.cvv2 == null || $th.cvv2.length != 3) {
                //     Toast('请输入正确的cvv2');
                //     return;
                // }
                // if ($th.year == null || $th.month == null || $th.year.length != 2 || $th.month.length != 2 || $th.month >
                //     12) {
                //     Toast('请输入正确的有效期');
                //     return;
                // }
                // if (this.sms == null || this.sms.length != 6) {
                //     Toast('请输入正确验证码');
                //     return;
                // }
                // Toast.loading({
                //     mask: true,
                //     message: '请稍后',
                //     duration: 0, 
                // });
                var sendData = {
                    orderNo:$th.orderNo, //订单号 通过发送短信获取的
                    customerId:$th.cardDetial.customerId,//
                    cardId:$th.cardDetial.id, //卡id
                    smsCode:$th.sms,//验证码
                }
                var cardDetial = await $th.$axios($th.GLOBAL.host+'/cjSign/cardSign',sendData,'get');
                if(cardDetial.code=='0000'){
                    $th.$toast("签约成功");
                     $th.$router.push({
                         name: "/cj/confirmOrder"
                    });
                }else{
                    $th.$toast(cardDetial.msg);
                }
              
            },
            goback() {
                this.$router.push('/')
            }
        },
        filters: {

            fmtbankcode: function (bank) {
                if(bank){
                     return bank.substr(0, 4) + "********" + bank.substr(-4);
                }
               
            },
            fmtscname: function (fmtscname) {
                var mccname = {
                    'ICBC': "工商银行",
                    'ABC': "农业银行",
                    'BOC': "中国银行",
                    'CCB': "建设银行",
                    'CMBCHINA': "招商银行",
                    'POST': "邮政储蓄",
                    'ECITIC': "中信银行",
                    'CEB': "光大银行",
                    'BOCO': "交通银行",
                    'CIB': "兴业银行",
                    'CMBC': "民生银行",
                    'PINGAN': "平安银行",
                    'CGB': "广发银行",
                    'HXB': "华夏银行",
                    'SPDB': "浦发银行",
                    'SHB': "上海银行",
                    'CBHB': "渤海银行",
                    'JSB': "江苏银行"
                };
                if (mccname[fmtscname] == "undefind") {
                    return fmtscname;
                } else {
                    return mccname[fmtscname];
                }
            }
        },
    }
</script>
<style scoped>
    .phone {
        color: #636363;
        padding: 10px 20px;
        font-size: 16px;
    }
    .van-nav-bar__text{ color: white;}
   .van-nav-bar .van-icon{
        color: white;
    }
    .van-nav-bar .van-icon{display: inline-block;}
    .van-nav-bar__title{color: white}
    .ktbtn{
        color: white;
        display: block;
        border: none;
        background-color: #2A71C8;
        width: 90%;
        margin: 0 auto;
        margin-top: 30px;
        line-height: 40px;
        border-radius: 10px;

    }
</style>
<style>
    .van-nav-bar .van-icon{
    color:white;
}
</style>

          

